<template>
  <div id="pdfDom">
    <!-- 标签导航区 -->
    <div class="main-navigation">
      <button class="navigation-abel" @click="back()">成长报告</button>
      <i class="el-icon-arrow-right"></i>
      <button class="navigation-abel">{{semesterName}}</button>
    </div>

    <div class="box">
      <div class="word">
        <div class="flash">
          <!-- 动态翻页效果 -->
          <div class="navflipbook" ref="tilt">
              <div :ref="'fanye' + index" v-for="(item ,index) in flipbook" :key="index" class="page" @click="leftfilp(index)">
                <img :class="['fanye',`fanye${index}` ]" :src="item.title" alt="">
              </div>
          </div>
        </div>

        <div class="right">
          <div class="year">{{semesterName}}</div>
          <div class="make">已定稿</div>
          <div class="btnBox">
            <button class="gomake">导出相册</button>
            <button class="pdf" @click="getPdf(stuName+'成长报告')">导出PDF</button>
            <button class="share" @click="share">分享</button>
          </div>
        </div>
      </div>

      <div class="Info">
        <div class="Picture">
          <el-carousel :interval="5000" arrow="always">
            <el-carousel-item v-for="item in 4" :key="item">
              <!-- 第一个页面 -->
              <div style="display:flex;flex-direction:row;" v-if="1==item">

                <div class="picture1" id='pdfDom'>
                  <img src="@/assets/imagesbackground/Myself.png" alt="" class="img">
                  <div class="photo2" v-if="ismeList.status== '1'">
                    <img :src="`${ src1 + ismeList['img1']}`" class="img1">
                  </div>
                </div>

                <div class="picture" id='pdfDom'>
                  <img src="@/assets/imagesbackground/MyFirend.png" alt="" class="img">
                  <div class="photo1" v-if="childList.status == '1'">
                    <img :src="`${ src1 + childList['img1']}`" alt="" class="img2">
                    <img :src="`${ src1 + childList['img2']}`" class="img3">
                  </div>
                </div>

                <div class="picture" id='pdfDom'>
                  <img src="@/assets/imagesbackground/Word.png" alt="" class="img">
                  <div class="photo2" v-if="wordList.status == '1'">
                    <img :src="`${ src1 + wordList['img1']}`" alt="" class="uploadimg">
                    <img :src="`${src1 + seals['成长报告专用章']}`" class="seal" />
                  </div>
                </div>

                <div class="picture1" id='pdfDom'>
                  <img src="@/assets/imagesbackground/MyHomework.png" alt="" class="img">
                  <div class="photo2" v-if="workList.status == '1'">
                    <img :src="`${ src1 + workList['img1']}`" alt="" class="uploadimg">
                    <img :src="`${src1 + seals['成长报告专用章']}`" class="seal1" />
                  </div>
                </div>
              </div>

              <!-- 第二个页面 -->
              <div style="display:flex;flex-direction:row;" v-if="2==item">

                <div class="picture1" id='pdfDom'>
                  <img src="@/assets/imagesbackground/Theme.png" alt="" class="img">
                  <div class="photo2" v-if="thingList.status == '1'">
                    <img :src="`${ src1 + thingList['img1']}`" class="uploadimg">
                    <img :src="`${src1 + seals['成长报告专用章']}`" class="seal1" />
                  </div>
                </div>

                <div class="picture1" id='pdfDom'>
                  <img src="@/assets/imagesbackground/score.png" alt="" class="img">
                  <div class="photo2" v-if="paperList.status == '1'">
                    <img :src="`${ src1 + paperList['img1']}`" class="uploadimg">
                    <img :src="`${src1 + seals['成长报告专用章']}`" class="seal1" />
                  </div>
                </div>

                <div class="picture1" id='pdfDom'>
                  <img src="@/assets/imagesbackground/Action.png" alt="" class="img">
                  <div class="photo1" v-if="activityList.status == '1'">
                    <img :src="`=${ src1 + activityList['img1']}`" alt="" class="img2">
                    <img :src="`${ src1 + activityList['img2']}`" class="img3">
                  </div>
                </div>

                <div class="picture1" id='pdfDom'>
                  <div class="background">
                    <img class="backgroundimg" src="@/assets/imagesbackground/Report.png">
                    <img class="imgreport" src="@/assets/images/StudentReport.png">
                  </div>

                  <div v-if="resultList.status == '1'">
                    <div class="name">
                      <span>{{resultList['班级']}}</span>
                      <span>{{resultList['学生姓名']}}</span>
                    </div>
                    <div class="height">
                      <span>{{resultList['身高']}}</span>
                      <span>{{resultList['体重']}}</span>
                    </div>
                    <div class="ear">
                      <span>{{resultList['左眼']}}</span>
                      <span>{{resultList['右眼']}}</span>
                    </div>
                    <div class="resport1">
                      <div class="score">
                        <span>{{resultList['成绩']['语文']}}</span>
                        <span>{{resultList['成绩']['数学']}}</span>
                        <span>{{resultList['成绩']['英语']}}</span>
                        <span>{{resultList['成绩']['科学']}}</span>
                      </div>
                      <div class="score">
                        <span>{{resultList['综合评价等第']['语文']}}</span>
                        <span>{{resultList['综合评价等第']['数学']}}</span>
                        <span>{{resultList['综合评价等第']['英语']}}</span>
                        <span>{{resultList['综合评价等第']['科学']}}</span>
                      </div>
                    </div>

                    <div class="resport2">
                      <div class="assess">
                        <span>{{resultList['综合评价等第']['道德与法']}}</span>
                        <span>{{resultList['综合评价等第']['体育']}}</span>
                      </div>
                      <div class="assess">
                        <span>{{resultList['综合评价等第']['音乐']}}</span>
                        <span>{{resultList['综合评价等第']['信息']}}</span>
                      </div>
                      <div class="assess">
                        <span>{{resultList['综合评价等第']['美术']}}</span>
                        <span>{{resultList['综合评价等第']['综合实践']}}</span>
                      </div>
                    </div>
                    <div class="showreport">
                      <div class="allassesss">
                        <span>{{resultList['综合评价等第']['听课专注']}}</span>
                        <span>{{resultList['综合评价等第']['做事负责']}}</span>
                      </div>
                      <div class="allassesss">
                        <span>{{resultList['综合评价等第']['学习主动']}}</span>
                        <span>{{resultList['综合评价等第']['同学合作']}}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 第三个页面 -->
              <div style="display:flex;flex-direction:row;" v-if="3==item">
                <div class="picture1" id='pdfDom'>
                  <img src="@/assets/imagesbackground/AwaitWord.png" alt="" class="img">
                  <div div="send" v-if="sendList.status == '1'">
                    <span class="send1">{{ sendList["班主任寄语"] }}</span>
                    <span class="send2">{{ sendList["任课老师寄语"] }}</span>
                    <!-- <img :src="`${src1 + sendList['']}`" class="seal1">
                      <img :src="`${src1 + sendList['']}`" class="seal2"> -->
                  </div>
                </div>

                <div class="picture1" id='pdfDom'>
                  <img src="@/assets/imagesbackground/FirendWord.png" alt="" class="img">
                  <div v-if="talkList.status == '1'">
                    <img :src="`${ src1 + talkList['img1']}`" class="img10">
                    <img :src="`${ src1 + talkList['img1']}`" class="img11">
                    <img :src="`${ src1 + talkList['img1']}`" class="img12">
                  </div>
                </div>

                <div class="picture1" id='pdfDom'>
                  <img src="@/assets/imagesbackground/Honour.png" alt="" class="img">
                  <img src="@/assets/images/StudentHonour.png" alt="" class="img10">
                  <img src="@/assets/images/StudentHonour.png" alt="" class="img11">
                  <img src="@/assets/images/StudentHonour.png" alt="" class="img12">
                  <div class="info">

                    <div v-if="honourList.status == '1'">
                      <img :src="`${src1 + honourseal[0]}`" class="sealimg1" />
                      <img :src="`${src1 + honourseal[1]}`" class="sealimg2" />
                      <img :src="`${src1 + honourseal[2]}`" class="sealimg3" />
                    </div>
                  </div>
                </div>

                <div class="picture1" id='pdfDom'>
                  <img src="@/assets/imagesbackground/sum.png" alt="" class="img">

                  <div v-if="sumList.status == '1'">
                    <img :src="`${ src1 + sumList['img1']}`" class="img10">
                    <img :src="`${ src1 + sumList['img1']}`" class="img11">
                    <img :src="`${ src1 + sumList['img1']}`" class="img12">
                  </div>
                </div>
              </div>

              <!-- 第四个页面 -->
              <div style="display:flex;flex-direction:row;" v-if="4==item">
                <div class="picture1" id='pdfDom'>
                  <img src="@/assets/imagesbackground/Grow.png" alt="" class="img">
                  <div class="photo2" v-if="contentsList.status == '1'">
                    <img :src="`${ src1 + contentsList['img1'] }`" class="img1">
                  </div>
                </div>

                <div class="picture1" id='pdfDom'>
                  <img src="@/assets/imagesbackground/Personality.png" alt="" class="img">
                  <div class="photo2" v-if="specificList.status == '1'">
                    <img :src="`${src1 + specificList['img1']}`" class="img1" />
                  </div>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>

        </div>
      </div>
    </div>

    <!-- 分享功能 -->
    <div class="mask" v-if="sharePages">
      <div class="windows" v-if="sharePages">
        <div class="windows-top">
          <div class="top-left">分享到微信</div>
          <button class="top-right" @click="share">
            <i class="el-icon-close" style="color:rgb(1,1,1,0.9);"></i>
          </button>
        </div>
        <div class="windows-bottom">
          <div class="img"></div>
          <div>
            <span>微信扫描二维码，点击右上角</span>
            <span>🌰</span>
            <span>按钮</span>
          </div>
          <div>
            <span>分享给</span>
            <span style="color:#31c27c;">好友</span>
            <span>或</span>
            <span style="color:#31c27c;">朋友圈</span>

          </div>
        </div>
      </div>
    </div>

    <!-- <footerNavigation></footerNavigation> -->
  </div>
</template>


<script>
// import headerNavigation3 from "../../components/background/headerNavigation3"
import labelNavigation from "../../components/background/labelNavigation"
// import footerNavigation from "../../components/background/footerNavigation"
import { makereport1 } from '@/api/grow'
import module from "@/allurlimg/img"

export default {
  data () {
    return {
      htmlTitle: "页面导出PDF文件名", //这是定义导出的名字，不写这个默认下载的名字是undefin
      src1: '',
      semesterName: this.semesterName,
      flipbook: [
        { id: 1, title: require('../../../assets/images/010.png'), transform: 'rotateY(0deg)' },
        { id: 2, title: require('../../../assets/images/002.png'), transform: 'rotateY(0deg)' },
        { id: 3, title: require('../../../assets/images/003.png'), transform: 'rotateY(0deg)' },
        { id: 4, title: require('../../../assets/images/004.png'), transform: 'rotateY(0deg)' },
        { id: 5, title: require('../../../assets/images/005.jpg'), transform: 'rotateY(0deg)' },
        { id: 6, title: require('../../../assets/images/006.png'), transform: 'rotateY(0deg)' },
        { id: 7, title: require('../../../assets/images/007.png'), transform: 'rotateY(0deg)' },
        { id: 8, title: require('../../../assets/images/008.png'), transform: 'rotateY(0deg)' },
        { id: 9, title: require('../../../assets/images/009.png'), transform: 'rotateY(0deg)' },
        { id: 10, title: require('../../../assets/images/001.jpg'), transform: 'rotateY(0deg)' },
      ],
      message: {},
      growthItem: [],
      reportList: [],
      ismeList: [],
      childList: [],
      wordList: [],
      workList: [],
      thingList: [],
      paperList: [],
      activityList: [],
      resultList: [],
      sendList: [],
      talkList: [],
      honourList: [],
      sumList: [],
      contentsList: [],
      specificList: [],
      sharePages: false, // 分享页面
      seals: [],
      honourseal: [],
    }
  },
  components: {
    // headerNavigation3,
    labelNavigation,
    // footerNavigation,
  },
  methods: {
    back () {
      this.$router.push('/report1')
    },


    /*点击翻页效果 */
    leftfilp(index) {
      this.$refs[`fanye${index}`][0].classList.add('active')
    },
    /*调用成长报告图片 */
    async gets () {
      console.log(this.growthId, this.studentId)
      const res = await makereport1({ 
        growthId: this.growthId, 
        studentId: this.studentId 
      });
      console.log(res);
      this.growthItem = res.data
      console.log(this.growthItem)

      this.seals = this.growthItem["seals"]
      console.log(this.seals)

      if (this.growthItem['0']['status'] == 1) {
        this.ismeList = this.growthItem['0']
      }

      if (this.growthItem['1']['status'] == 1) {
        this.childList = this.growthItem['1']
      }


      if (this.growthItem['12']['status'] == 1) {
        this.wordList = this.growthItem['12']
      }

      if (this.growthItem['3']['status'] == 1) {
        this.workList = this.growthItem['3']
      }

      if (this.growthItem['4']['status'] == 1) {
        this.thingList = this.growthItem['4']
      }


      if (this.growthItem['5']['status'] == 1) {
        this.paperList = this.growthItem['5']
      }

      if (this.growthItem['6']['status'] == 1) {
        this.activityList = this.growthItem['6']
      }

      if (this.growthItem['13']['status'] == 1) {
        this.resultList = this.growthItem['13']
      }

      if (this.growthItem['2']['status'] == 1) {
        this.sendList = this.growthItem['2']
      }

      if (this.growthItem['7']['status'] == 1) {
        this.talkList = this.growthItem['7']
      }

      if (this.growthItem["8"]["status"] == 1) {
        this.honourList = this.growthItem["8"];
        if (this.honourList['honor1'] == 1) {
          this.honourseal.push(this.seals['卓越少年专用章'])
        }
        if (this.honourList['honor2'] == 1) {
          this.honourseal.push(this.seals['励志少年专用章'])
        }
        if (this.honourList['honor3'] == 1) {
          this.honourseal.push(this.seals['模范学生专用章'])
        }
        if (this.honourList['honor4'] == 1) {
          this.honourseal.push(this.seals['梦想领袖专用章'])
        }
        if (this.honourList['honor4'] == 1) {
          this.honourseal.push(this.seals['文明学生专用章'])
        }
      }

      if (this.growthItem['9']['status'] == 1) {
        this.sumList = this.growthItem['9']
      }

      if (this.growthItem['10']['status'] == 1) {
        this.contentsList = this.growthItem['10']
      }

      if (this.growthItem['11']['status'] == 1) {
        this.specificList = this.growthItem['11']
      }

    },
    // 分享事件
    share () {
      this.sharePages = !this.sharePages
    },
  },

  mounted () {
    let growthId = this.$route.params.growthId
    let studentId = this.$route.params.studentId
    let semesterName = this.$route.params.semesterName
    if (growthId !== undefined) {
      sessionStorage.setItem('growthId', growthId)
      this.growthId = sessionStorage.getItem('growthId')
    } else {
      this.growthId = sessionStorage.getItem('growthId')
    }

    if (studentId !== undefined) {
      sessionStorage.setItem('studentId', studentId)
      this.studentId = sessionStorage.getItem('studentId')
    } else {
      this.studentId = sessionStorage.getItem('studentId')
    }

    if (semesterName !== undefined) {
      sessionStorage.setItem("semesterName", semesterName);
      this.semesterName = sessionStorage.getItem("semesterName");
    } else {
      this.semesterName = sessionStorage.getItem("semesterName");
    }
    this.gets()
    this.src1 = module.host
  }
}
</script>


<style scoped>
/*内容区域的盒子 */
.box {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  line-height: .625rem;
  width: 75rem;
  height: 50rem;
  margin:0 auto;
}

/*上面的翻页和文字一起的盒子*/
.word{
  display: flex;
  margin-top: 2.5rem;
}

/*页面下半部分的内容*/
.Info{
  display: flex;
  margin-top: 10rem;
}
/*成长报告相关页面 */
.Picture{
  display: flex;
  /* margin-left: 16.875rem; */
  justify-content: center;
}
/*学年学期*/
.word .year{
  margin-top: 3.25rem;
  margin-left: 2.4375rem;
  font-size:3rem; 
  font-weight: 700;
}
 /*文字制作中 */
.word .make{
  background-color:#f2e5e5 ;
  width: 5.375rem;
  height: 2.25rem;
  font-size: 1.1rem;
  line-height: 2.25rem;
  margin-left: 2.4375rem;
  margin-top: 1.875rem;
  border-radius: .3125rem;
  text-align: center;
}
/*导出相册按钮 */
.word .gomake{
  background-color:#7c0000 ;
  width: 9.625rem;
  height: 2.875rem;
  font-size: 1.2rem;
  line-height: 2.875rem;
  margin-left: 2.4375rem;
  margin-top: 3.125rem;
  color: #d9d6d9;
  border-radius: .3125rem;
  border:#7c0000 solid 0.1rem;
  cursor: pointer;
}


/*一个模本盒子*/
.picture1{
  width: 13.75rem;
  height: 19.375rem;
  position:relative;
}

.zhaopian{
  width: 13.75rem;
  height: 19.375rem;
  margin-left: 1.0625rem;
}

/*右边的文本框 */
.right{
  display: flex;
  flex-direction: column;
}
/* 放翻页书的盒子*/
.flash{
  width: 31.25rem;
  height: 17.25rem;
  display: flex;
}
/*翻页效果的样式*/ 
.navflipbook {
  cursor: pointer;
  position: relative;
  display: flex;
  transition: all 0.8s;
  transform-style: preserve-3d;
  transform: perspective(589px) rotateX(360deg);
  width: 400px;
}

.tiltnavflipbook {
  transform: perspective(589px) rotateX(420deg);
}
.page {
  position: absolute;
  transform-style: preserve-3d;
  width: 50%;
  left: 25%;
  transition: all 0.8s;
  transform-origin: left;
  transform: rotateY(0deg);
}
@keyframes test {
  from {
    transform: rotateY(0);
  }
  to {
    transform: rotateY(-180deg);
  }
}

@keyframes moveshadow {
  0% {
    filter: brightness(100%);
  }
  50% {
    filter: brightness(50%);
  }
  100% {
    filter: brightness(100%);
  }
}
.fanye {
  width: 100%;
  transform-origin: center left;
}

.fanye1 {
  animation: test 2s ease-in-out forwards;
}
.fanye2 {
  animation: test 4s ease-in-out forwards;
}

.fanye3 {
  animation: test 6s ease-in-out forwards;
}

.fanye4 {
  animation: test 8s ease-in-out forwards;
}
.fanye5{
  animation: test 10s ease-in-out forwards;
}

.active .fanye {
  /*animation: test 0.4s ease-out;*/
  animation: test 2s ease-out forwards;
  transform-origin: center left;
}

/*一个模本盒子*/
.picture1{
    display: flex;
    width: 13.75rem;
    height: 19.375rem;
    margin-left:1.0625rem;
}
/*背景照片*/
.img{
  height:19.375rem;
  width:13.75rem;
}
/*内容照片 */
.photo2{
  height:13.1875rem;
  width:9.875rem;
  position:absolute;
  z-index:2;
  top:0rem;
  margin-top:2.75rem;
  margin-left:2rem;
}
/*上传的照片*/
.img1{
  position: relative;
  height:13.1875rem;
  width:9.875rem;
  z-index: 2;
}
.uploadimg{
   position: relative;
  height:13.1875rem;
  width:9.875rem;
  z-index: 2;
}

/*我和我的小伙伴 */
/*一个模本盒子*/
.picture{
    display: flex;
    width: 13.75rem;
    height: 19.375rem;
    margin-left: 1.0625rem;
  }
 /*背景照片*/
 .img{
  height:19.375rem;
  width:13.75rem;
}
/*内容照片 */
.photo1{
  height:13.1875rem;
  width:9.875rem;
  position:absolute;
  z-index:2;
  top:0rem;
  margin-top:2.75rem;
  margin-left:2rem;
}
.img2{
  position: relative;
  height: 5.5rem;
  width: 9.875rem;
  
}
.img3{
  position: relative;
  height: 5.5rem;
  width: 9.875rem;
  margin-top:1.9375rem;
}




/*使用跑马灯的组件实现轮播效果 */
.el-carousel {
  width: 75rem;
  justify-items: center;
  align-content: center;
}

/*成长报告和按钮之间的距离 */
.el-carousel__item.is-animating{
  margin-left:6.875rem;
}

/*文字制作中 */
  .make{
  background-color:#f2e5e5 ;
  width: 5.375rem;
  height: 2.25rem;
  font-size: .625rem;
  line-height: 2.25rem;
  margin-left: 2.4375rem;
  margin-top: 1.875rem;
  border-radius: .3125rem;
}
/*导出相册按钮 */
.gomake{
  background-color:#101010 ;
  width: 9.625rem;
  height: 2.875rem;
  font-size: .625rem;
  line-height: 2.875rem;
  margin-left: 2.4375rem;
  margin-top: 3.125rem;
  color: #d9d6d9;
  border-radius: .3125rem;
}

/*导出pdf按钮 */
.pdf{
  background-color:#ffffff ;
  width: 9.625rem;
  height: 2.875rem;
  font-size: 1.2rem;
  line-height: 2.875rem;
  margin-left: .3125rem;
  margin-top: 3.125rem;
  color: #7c0000;
  border-radius: .3125rem;
  border:#7c0000 solid 0.1rem;
  cursor: pointer;
}
/*分享按钮 */
.share{
  background-color:#7c0000 ;
  width: 9.625rem;
  height: 2.875rem;
  font-size: 1.2rem;
  line-height: 2.875rem;
  margin-left: .3125rem;
  margin-top: 3.125rem;
  color: #ffffff;
  border-radius: .3125rem;
  border:#7c0000 solid 0.1rem;
  cursor: pointer;
}
/*包按钮盒子*/
.btnBox{
    display: flex;
}


.background{
  display: flex;

}

.backgroundimg{
  height:19.375rem;
  width: 13.75rem;
  z-index: 1;
  position: relative;
  margin: 0 auto;
}
.imgreport{
  position:absolute;
  z-index: 2;
  height: 15rem !important;
  width: 11.875rem !important;
  left: 50.1%; top: 48.5%;
  transform: translate(-50%, -50%);
}
/* 信息 */
.name{
  display: flex;
  z-index: 3;
  position:absolute;
  top: 20.5%;
  left:15%;
  font-size: .25rem;
  width: 6.875rem;
  justify-content: space-between;
}
.height{
  display: flex;
  z-index: 3;
  position:absolute;
  top: 24.5%;
  left:15%;
  font-size: .25rem;
  width: 6.875rem;
  justify-content: space-between;
}
.ear{
    z-index: 3;
    position:absolute;
    top: 24.5%;
    right: 15%;
    font-size: .25rem;
    width: .625rem;
    display: flex;
    flex-wrap: wrap;
    align-content:space-between;
    height: 1.25rem;
}
.score{
  display: flex;
  /* width: 7.5rem; */
  justify-content: space-between;
  margin-left:0.6rem;
}
.score1{
  margin-left:0.2rem;
}
.resport1{
   z-index: 3;
   position:absolute;
   top: 34.8%;right: 17%;
   font-size: .25rem;
}
.assess{
  width: 6.25rem;
  display: flex;
  justify-content:space-between;
}
.resport2{
  z-index: 3;
  position:absolute;
  top: 50.2%;
  right: 20%;
  font-size: .8125rem;
}
.allassesss{
  display: flex;
  width: 6.25rem;
  justify-content: space-between;
}
.showreport{
    z-index: 3;
    position:absolute;
    top: 70.5%;right: 20%;
    font-size: .8125rem;
}
/* 按钮 */
.btn{
    color: rgba(16, 16, 16, 1);
    font-size: .875rem;
    text-align: center;
    border: .0625rem solid rgba(187, 187, 187, 1);
    background-color: rgba(124, 0, 0, 1);
    width: 8.125rem;
    height: 2.1875rem;
    color: rgba(255, 255, 255, 1);
}
.btnCountainer{
    width: 100%;
    text-align: center;
    margin-top: 2.5rem;
}

.send1{
   position: absolute;
   height: 6.25rem;
   width: 10.625rem;
   z-index: 2;
   top:18%;
   left:15%;
   line-height: .9375rem;
}

.send2{
   position: absolute;
   height: 6.25rem;
   width: 10.625rem;
   z-index: 2;
   top:60%;
   left:15%;
   line-height: .9375rem;
}
.img10{
  height:4.375rem;
  width:11.25rem;
  position:absolute;
  z-index:2;
  top:1.875rem;
  left:1.25rem;
}
.img11{
  height:4.375rem;
  width:11.25rem;
  position:absolute;
  z-index:2;
  top:7.5rem;
  left:1.25rem;
}
.img12{
  height:4.375rem;
  width:11.25rem;
  position:absolute;
  z-index:2;
  top:13.125rem;
  left:1.25rem;
}


/* 8页面的字*/
.info{
  position: absolute;
  top:20%;
  left:40%;
  z-index:3;
}
.date1{
  font-size:.0625rem;
  display:inline-block;
  width:60%;
  word-wrap:break-word;
  white-space:normal;
  margin-left:30%;
  margin-top:5%;
}
.info2{
  margin-top:5rem;
  display:inline-block;
  width:60%;
  word-wrap:break-word;
  white-space:normal;
}
.date2{
  font-size:.0625rem;
  display:inline-block;
  width:60%;
  word-wrap:break-word;
  white-space:normal;
  margin-left:30%;
  margin-top:5%;
}
.info3{
  margin-top:5rem;
  display:inline-block;
  width:60%;
  word-wrap:break-word;
  white-space:normal;
}
.date3{
  font-size:.0625rem;
  display:inline-block;
  width:60%;
  word-wrap:break-word;
  white-space:normal;
  margin-left:30%;
  margin-top:5%;
}
/*小伙伴的话页面的字 */
.word1{
  position: absolute;
  top:14%;
  left:17%;
  z-index:3;
  width: 11.25rem;
  font-size:.8125rem;
}
.maininfo{
  width: 8.75rem;
}
.word2{
 display:inline-block;
 width:9.1875rem;
 height:2rem;
}

.word3{
  display:inline-block;
  width:9.1875rem;
  height:2rem;
  margin-top:27%
}

.word4{
  display:inline-block;
  width:9.1875rem;
  height:2rem;
  margin-top:26%
}
.word5{
  margin-left:70%;
  font-size:.0625rem;
}

/* 分享功能 */
.mask{
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
  justify-content: center;

  background-color: rgba(56, 55, 55, 0.651);
  z-index: 10;
}

.windows {
  display: flex;
  flex-direction: column;
  margin-top: 6.25rem;
  width: 30%;
  height: 37.5rem;
  align-items: center;
  background-color: rgb(255, 255, 255);
}

.windows-top {
  width: 100%;
  display: flex;
  position: relative;
  border-bottom: .125rem solid #f5f5f5;
}

.windows-top .top-left {
  padding: .75rem;
  margin: auto;
  font-size: 1rem;
}

.windows-top .top-right {
  top: .3125rem;
  right: .0625rem;
  position: absolute;

  border: 0;
  padding: 0;
  font-size: 1.875rem;
  margin-right: 1.25rem;
  background: #ffffff;
}

.windows-bottom {
  display: flex;
  text-align: center;
  flex-direction: column;
}

.windows-bottom .img{
  width: 12.5rem;
  height: 12.5rem; 
  margin: 2.5rem; 
  text-align: center;
  background: #f5f5f5; 
}

.return{
  font-size:1.125rem ;
  text-align: center;
  position: absolute;
  left: 13.125rem;
}

/* 标签导航区内容 */
.main-navigation {
  margin: 1.25rem;
  display: flex;
  margin: 0 14.375rem 0 14.375rem;
  flex-direction: row;
}
.icon-shouye-copy{
  color: rgb(202, 160, 166);
  font-size: 1.5625rem;
  margin-right: .1875rem;
}
.icon-right-1-copy{
  color:darkgray;
  font-size: 1.5625rem;
  padding: .4375rem;
}
.navigation-abel1{
  line-height: 1.5625rem;
  width: 6.25rem;
  border-radius: 1.5625rem;
  border: 0rem; 
  padding: .625rem;
  line-height: .9375rem;
  font-size: 1.25rem;
  cursor: pointer;
}

/* 导航标签 */
.navigation-abel {
  line-height: 1.5625rem;
  font-size: 1.25rem;
  border-radius: 1.5625rem;
  padding: .5rem 1.3125rem .5rem 1.375rem;
  border: 0rem;
  background: #f2e5e5;
  cursor: pointer;
}

.el-icon-arrow-right:before{
  font-size:2.25rem;
}

.seal{
  position:absolute;
  z-index:4;
  width:4rem;
  height: 2rem;
  top:13rem;
  left:38rem;
}
.seal1{
  position:absolute;
  z-index:4;
  width:4rem;
  height: 2rem;
  top:13rem;
  left:7.3rem;
}

.seal2{
  position:absolute;
  z-index:4;
  width:4rem;
  height: 2rem;
  top:8rem;
  left:9rem;
}

.seal3{
  position:absolute;
  z-index:4;
  width:4rem;
  height: 2rem;
  top:15rem;
  left:9rem;
}

.sealimg1{
  position:absolute;
  z-index:4;
  width:4rem;
  height: 1.5rem;
  top:3.15rem;
  left:5.2rem;
}
.sealimg2{
  position:absolute;
  z-index:4;
  width:4rem;
  height: 1.5rem;
  top:8.73rem;
  left:5.2rem;
}

.sealimg3{
  position:absolute;
  z-index:4;
  width:4rem;
  height: 1.5rem;
  top:14.5rem;
  left:5.2rem;
}
</style>